這邊是上一篇Angular的主從元件開發的範例檔案：按此下載
本文同步發佈於:Claire's BLOG

創建 HeroService

使用Angular CLI創建一個名為hero的服務

ng generate service hero

我們會看到在src/app下多出了兩個檔案：hero.service.spec.ts和hero.service.ts

打開src/app/hero.service.ts可以看到下面內容

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {

  constructor() { }

}

注意到我們用@Injectable()來宣告HeroService這個類別，代表這個類別可能本身有依賴注入，對Service來說是強烈建議要加上這個宣告

將HeroService提供給app使用

Service可以供appModule、或任何Component使用，如果要給appModule使用， 則需在src/app/app.module.ts的@NgModule裡加入

providers: [ HeroService ],

這邊有更多NgModule的說明：NgModule
另外，若要使用CLI來自動完成providers的設定，則可以用下面的指令

ng generate service hero --module=app

修改HeroesComponent去使用HeroService裡的資料

打開src/app/heroes/heroes.component.ts，修改成以下的內容

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';//1. 增加HeroService並移除HEROES
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  heroes: Hero[];//2. 在這邊先不設定內容

  selectedHero: Hero;

  constructor(private heroService: HeroService) { }//3. 宣告注入的service

  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();//4. 取service內的資料放進變數內
  }

  ngOnInit() {
    this.getHeroes();//5. ngOnInit會在初始化元件時被呼叫，在此時去取得heroes的值
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }
}

讓getHeroes被更動時能夠被通知

Observable是RxJS library中很重要的一個功能。

當我們在src/app/hero.service.ts的getHeroes()方法回傳值前面加上Observable宣告，當service內的資料變動時，其他注入的內容也會同步被異動 首先要先import下面兩個檔案

import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';

然後在getHeroes的回傳直類型前加上Observable宣告

getHeroes(): Observable {
  return of(HEROES);
}

注：若使用HttpClient.get<Hero[]>()亦會傳回Observable<Hero[]>，只是內容是由http傳來
在接收Observable物件時的方法也與非Observable物件的方式不同，過去若非Observable物件時，在hero.component.ts裡的getHeroes函數如下

getHeroes(): void {
  this.heroes = this.heroService.getHeroes();
}

若要使用Observable宣告則須改為：

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);//差異在這邊
}

Observable.subscribe()是最關鍵的相異之處
最大的差異在於我們送出修改到伺服器傳回回應之間，未使用Observable.subscribe()方法時，它不會先凍結UI不讓使用者修改，而有可能會造成資料的不一致。而使用Observable.subscribe()可以避免這個問題。

本日範例下載： live example / download example